<template>
	<div class="select-box">
		<div class="scroll">
			<router-link :to="{ name: item.name }" v-for="item in modeRoutes" :key="item.path">
				<div class="item-wrap">
					<span class="icon">
						<i class="iconfont" :class="item.meta.icon"></i>
					</span>
					<span class="text">{{ item.meta.name }}</span>
				</div>
			</router-link>
		</div>
	</div>
</template>

<script setup lang="ts">
import { modeRoutes } from '@v/router/modeRoutes';
</script>

<style scoped lang="scss">
.select-box {
	width: 100%;
	height: calc(100% - 16px);
	padding: 8px;
	position: absolute;
	top: 0;
	left: 0;
	:deep(a) {
		text-decoration: none;
	}
	& > .scroll {
		height: 100%;
		width: calc(100% - 8px);
	}
	.item-wrap {
		width: calc(100% - 16px - 15px);
		height: 45px;
		border-radius: 4px;
		margin-bottom: 10px;
		padding-left: 15px;
		line-height: 45px;
		cursor: pointer;
		font-size: 15px;
		color: var(--text-color-2);
		&:hover {
			background-color: var(--mouse-hover-bg-color-1);
			color: #409eff;
		}
		&:last-child {
			margin-bottom: 0;
		}
		& > .icon {
			width: 25px;
			position: relative;
			display: inline-flex;
			align-items: center;
			vertical-align: bottom;
		}
		& > .iconfont {
			font-size: 18px;
		}
	}
}
</style>
